<template>
	<view class="content">
		<share ref="sharesdk" :contentHeight="580"></share>
		
		<uniLocation :address="showAddrtext" v-on:setAddress="tosearchaddress" :iconlist="staticIconlist"></uniLocation>
		
		<!--轮播-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" indicator-color="#aaa" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="navigatorTo(item.LinkAccess)">
				<image :src="item.LinkImage" mode="aspectFill" class="swiperimg"></image>
			</swiper-item>
		</swiper>
		<!--三个小说明-->
		<image :src="explain" class="explain"></image>
		<!--四个icon-->
		<view class="special clear-both fs14 color3">
			<view :class="['specials','float-l',{specials0:index==0}]" v-for="(item,index) in iconList" :key="index" @tap="navigatorTo(item.LinkAccess)">
				<image :src="item.LinkImage" class="specialImg"></image>
				<text>{{item.Title}}</text>
			</view>
		</view>
		<!--三个专题-->
		<view class="special2 clear-both fs14 colorf">
			<view class="special21 float-l" v-for="(item,index) in threeList" v-show="item.Sorts==1" :key="index" @tap="navigatorTo(item.LinkAccess)">
				<image :src="item.LinkImage" mode="aspectFill" class="specialImg"></image>
				<!-- <text class="specialT">{{item.Title}}</text> -->
			</view>
			<view class="special22 float-r">
				<view :class="['special221',{'mar-bottom':item.Sorts==2}]" v-for="(item,index) in threeList" v-show="item.Sorts>1" :key="index" @tap="navigatorTo(item.LinkAccess)">
					<image :src="item.LinkImage"  mode="aspectFill" class="specialImg"></image>
					<!-- <text class="specialT">{{item.Title}}</text> -->
				</view>
			</view>
		</view>
		<!--本周吃啥-->
		<view class="eat">
			<view class="title clear-both">
				<view class="float-l clear-both titlel">
					<view class="float-l fs18 color3 titles">本周吃啥</view>
					<view class="float-l line"></view>
					<view class="float-l fs16 color9">发现更多精致美食</view>
				</view>
				<!-- <view class="float-r fs12 color3 titlel more"><navigator :url="moreurl" hover-class="none" open-type="switchTab">MORE</navigator></view> -->
			</view>
			
			<scroll-view scroll-x="true" class="scroll">
				<view :class="['scrolls',{scrolls0:index==otherList.length-1}]" v-for="(item,index) in otherList" :key="index" @tap="navigatorTo(item.LinkAccess)">
					<image :src="item.LinkImage" mode="aspectFill" class="scrollsImg"></image>
					<view class="text-over fs16 color3 scrollname">{{item.Remarks}}</view>
					<view class="text-over fs14 color9">{{item.Title}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script src="../../api/tabbar/index.js">
	
</script>

<style scoped="true" lang="scss">
	.content{
		width: 100%;
		.location{
			width: 91.4667vw;
			height: 10.667vw;
			margin: 0 auto;
			border-bottom: 2upx solid #E1E1E1;
			line-height: 10.667vw;
			.addres{
				max-width: 64vw;
			}
			.locEnt{
				width: 4.2667vw;
				height: 4.2667vw;
				margin-top: 3.2vw;
			}
			.locImg{
				width: 5.8667vw;
				height: 5.8667vw;
				margin-top: 2.4vw;
			}
			.locImgr{
				margin-left: 1.0667vw;
			}
		}
	
		.swiper{
			width: 91.4667vw;
			height: 48vw;
			margin: 0 auto;
			margin-top: 3.4667vw;
			.swiperimg{
				width: 100%;
				height: 47.66vw;
				border-radius: 2.133vw;
				display: block;
			}
		}
	
		.explain{
			width: 100%;
			height: 9.6vw;
			display: block;
		}
	
		.special{
			padding: 3.6vw 6.9334vw 6.667vw 6.9334vw;
			border-bottom: 2.667vw solid #FAFAFA;
			.specials{
				width: 15vw;
				margin-left: 8.7vw;
				text-align: center;
				.specialImg{
					width: 12.8vw;
					height: 12.8vw;
					display: block;
					margin: 0 auto;
					margin-bottom: 1.334vw;
				}
			}
			.specials0{
				margin-left: 0;
			}
		}
	
		.special2{
			padding: 6.4vw 4.2667vw;
			border-bottom: 2.667vw solid #FAFAFA;
			.specialT{
				top: 2.667vw;
				left: 2.9334vw;
				position: absolute;
				z-index: 2;
			}
			.special21{
				width: 44vw;
				height: 42.667vw;
				position: relative;
				border-radius: 2.133vw;
				overflow: hidden;
			}
			.special22{
				margin-left: 2.667vw;
				.special221,.special222{
					width: 44.8vw;
					height: 19.7334vw;
					border-radius: 2.133vw;
					position: relative;
					overflow: hidden;
				}
				.special222{
					margin-top: 3.2vw;
				}
			}
			.specialImg{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top:0;
				z-index: 1;
			}
			.mar-bottom{
				margin-bottom: 3vw;
			}
		}
		
		.eat{
			padding: 5.334vw 4.2667vw;
			.title{
				margin-bottom: 3.2vw;
				.titlel{
					height: 6.667vw;
					line-height: 6.667vw;
					.line{
						margin-left: 2.667vw;
						margin-right: 2.667vw;
						height: 4.2667vw;
						width: 2upx;
						background-color: #d8d8d8;
						margin-top: 1.2vw;
					}
				}
				.more{
					width: 16vw;
					height: 6.4vw;
					line-height: 6.4vw;
					border: 2upx solid #d8d8d8;
					border-radius:3.2vw;
					text-align: center;
				}
			}
			.scroll{
				width: 100%;
				white-space: nowrap;
				.scrolls{
					width: 53.334vw;
					margin-right: 3.2vw;
					display: inline-block;
					.scrollsImg{
						width: 100%;
						height: 32vw;
						display: block;
						border-radius: 2.1334vw;
					}
					.scrollname{
						margin-top: .8vw;
						margin-bottom: .5vw;
					}
				}
				.scrolls0{
					margin-right: 0;
				}
			}
		}
	}
</style>